<template>
  <div class="m-chat-editor">
    <div class="m-chat-editor-main">
      <div class="u-editor-icons">
        <span class="u-editor-icon">
          <i class="u-icon-img">
            <img src="../../assets/images/picimg.png" style="vertical-align: top;" />
          </i>
          <input type="file" ref="fileToSent" @change="sendFileMsg" />
        </span>
      </div>
      <p class="u-editor-input">
        <textarea v-if="sendTxt" rows="3" :placeholder="$t('l.chat_message20')" v-model="msgToSent"></textarea>
      </p>
      <span class="u-editor-send" @click="sendTextMsg">{{$t('l.chat_message21')}}</span>
    </div>
  </div>
</template>

<script>
import util from "@/utils";
import config from "@/configs";
import pageUtil from "@/utils/page";

export default {
  components: {},
  updated() {
    // window.document.body.addEventListener("click", () => {
    //   this.isEmojiShown = false;
    // });
  },
  props: {
    type: String,
    scene: String,
    to: String
  },
  data() {
    return {
      msgToSent: "",
      icon2: `${config.resourceUrl}/im/chat-editor-2.png`,
      sendTxt: true
    };
  },
  methods: {
    sendTextMsg() {
      if (/^\s*$/.test(this.msgToSent)) {
        this.$layer.msg(this.$t('l.chat_message22'));
        return;
      } else if (this.msgToSent.length > 800) {
        this.$layer.msg(this.$t('l.chat_message23'));
        return;
      }
      this.msgToSent = this.msgToSent.trim();
      if (this.type === "session") {
        this.$store.dispatch("im/sendMsg", {
          type: "text",
          scene: this.scene,
          to: this.to,
          text: this.msgToSent
        });
      }
      this.msgToSent = "";
    },
    sendFileMsg() {
      let ipt = this.$refs.fileToSent;
      if (ipt.value) {
        if (this.type === "session") {
          this.$store.dispatch("im/sendFileMsg", {
            scene: this.scene,
            to: this.to,
            fileInput: ipt
          });
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.m-chat-editor {
  // position: absolute;
  width: 100%;
  height: 154px;
  padding: 16px 30px 30px;
  border-top: 3px solid #f0f4f9;
  bottom: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
  .u-editor-input textarea {
    border: 0 none;
    resize: none;
    width: 80%;
    font-size: 14px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: #33385e;
    line-height: 20px;
    margin-top: 15px;
    &:focus {
      outline: 0 none;
      border: 0 none;
    }
  }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    opacity: 0.5;
  }
  .u-editor-send {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 123px;
    height: 40px;
    line-height: 40px;
    background: #2D8DFE;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
  .u-editor-icon {
    position: relative;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    input[type="file"] {
      position: absolute;
      display: inline-block;
      vertical-align: top;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: inherit;
      height: inherit;
      opacity: 0;
      font-size: 1rem;
    }
  }
}
</style>
